<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<% request.setCharacterEncoding("UTF-8");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/xSystem/css/xSystem.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/admin.css">
</head>
<body>

<jsp:include page="../layouts/head.jsp"></jsp:include>

<div class="am-cf admin-main">
    <jsp:include page="../layouts/menu.jsp"></jsp:include>
    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl am-cf">
                    <strong class="am-text-primary am-text-lg">添加商品</strong> /
                    <small>Add
                        Product
                    </small>
                </div>
            </div>
            <hr>
            <form class="am-form" action="${pageContext.request.contextPath}/admin/product/store" method="post"
                  enctype="multipart/form-data">
                <div class="am-tabs am-margin" data-am-tabs="">
                    <ul class="am-tabs-nav am-nav am-nav-tabs">
                        <li class="am-active"><a href="#tab1">通用信息</a></li>
                        <li><a href="#tab2">商品介绍</a></li>
                    </ul>
                    <div class="am-tabs-bd" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                        <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">商品类别</div>
                                <div class="am-u-sm-8 am-u-md-10">

                                    <select data-am-selected="{btnStyle: 'secondary', btnSize: 'sm', maxHeight: 360, searchBox: 1}"
                                            name="category_id">

                                        <c:forEach items="${categories}" var="category">
                                            <option value="${category.id }">${category.name }</option>
                                        </c:forEach>

                                    </select>
                                </div>
                            </div>
                            <div class="am-g am-margin-top-sm">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">商品名称</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end">
                                    <input type="text" class="am-input-sm" name="name">
                                </div>
                            </div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">单价</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <input type="text" class="am-input-sm" name="price" value="">
                                </div>
                            </div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">库存</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <input type="text" class="am-input-sm" name="stock" value="99">
                                </div>
                            </div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">排序</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <input type="text" class="am-input-sm" name="sortOrder" value="99">
                                </div>
                            </div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">缩略图</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <div class="am-form-group am-form-file">
                                        <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                            <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                                        </button>
                                        <input id="doc-form-file" type="file" name="file" multiple>
                                    </div>
                                    <div id="file-list"></div>
                                </div>
                            </div>


                            <div class="am-g am-margin-top sort">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">描述信息</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <textarea rows="4" name="depict"></textarea>
                                </div>
                            </div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">上架</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <label class="am-radio-inline">
                                        <input type="radio" value="1" name="isOnsale" checked> 是
                                    </label> <label class="am-radio-inline">
                                    <input type="radio" value="0" name="isOnsale"> 否
                                </label>
                                </div>
                            </div>
                            <div class="am-g am-margin-top">
                                <div class="am-u-sm-4 am-u-md-2 am-text-right">加入推荐</div>
                                <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                    <div class="am-btn-group" data-am-button="">
                                        <label class="am-btn am-btn-default am-btn-xs am-round">
                                            <input type="checkbox" name="isTop" value="1"> 置顶
                                        </label>
                                        <label class="am-btn am-btn-default am-btn-xs am-round">
                                            <input type="checkbox" name="isRecommend" value="1">推荐
                                        </label> <label class="am-btn am-btn-default am-btn-xs am-round">
                                        <input type="checkbox" name="isHot" value="1"> 热销
                                    </label>
                                        <label class="am-btn am-btn-default am-btn-xs am-round">
                                            <input type="checkbox" name="isNew" value="1"> 新品
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-tab-panel am-fade" id="tab2">
                            <div class="am-g am-margin-top-sm">
                                <div class="am-u-sm-12 am-u-md-12">
                                    <div id="markdown">
                                        <textarea name="content" style="height: 300px">啊实打实大师大叔</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-margin">
                    <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
                </div>
            </form>
        </div>
        <jsp:include page="../layouts/foot.jsp"></jsp:include>
    </div>
</div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="${pageContext.request.contextPath}/static/xSystem/js/jquery.html5-fileupload.js"></script>
<script src="${pageContext.request.contextPath}/static/xSystem/js/upload.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/js/app.js"></script>
<script>
    $(function () {
        $('#doc-form-file').on('change', function () {
            var fileNames = '';
            $.each(this.files, function () {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list').html(fileNames);
        });
    });

</script>
</body>
</html>